<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 2000px;
        }

        .middle {
            position: relative;
            float: left;
            width: 400px;
            height: 400px;
            margin-right: 10px;
            cursor: move;
        }

        /* 遮挡层 */
        .middle .layer {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.5;
            background-color: black;
            display: none;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .small {
            float: left;
            width: 70px;
            height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }


        div[class^="box"] {
            width: 70px;
            height: 70px;
            background-color: yellow;
            list-style: none;
        }

        div[class^="box"]:hover {
            border: 3px solid rgb(96, 96, 252);
        }

        /* 大盒子 */
        .medium {
            width: 400px;
            height: 400px;
            transform: translate(410px, 0px);
            display: none;
            background: url(./images/3.png);
            background-size: 800px, 800px;
        }
    </style>
</head>

<body>
    <div class="middle">
        <img src="./images/3.png" alt="">
        <div class="layer"></div>
    </div>
    <div class="small">
        <div class="box1"><img src="./images/3.png" alt=""></div>
        <div class="box2"><img src="./images/4.png" alt=""></div>
        <div class="box3"><img src="./images/5.png" alt=""></div>
        <div class="box4"><img src="./images/6.png" alt=""></div>
        <div class="box5"><img src="./images/7.png" alt=""></div>
    </div>
    <div class="medium"></div>
    <!-- 遮挡层 -->


    <script>
        const middle = document.querySelector('.middle')
        const small = document.querySelector('.small')
        small.addEventListener('mouseover', function (e) {
            console.log(e.target.src)
            if (e.target.tagName === 'IMG') {
                middle.querySelector('img').src = e.target.src
                medium.style.backgroundImage = `url(${e.target.src})`
            }
        })

        let time = 0
        const medium = document.querySelector('.medium')
        middle.addEventListener('mouseenter', show)
        middle.addEventListener('mouseleave', hide)
        // 经过大盒子显示隐藏
        medium.addEventListener('mouseenter', show)
        medium.addEventListener('mouseleave', hide)
        function show(e) {
            clearTimeout(time)
            medium.style.display = 'block'
            console.log(e);
        }
        function hide() {
            time = setTimeout(function () {
                medium.style.display = 'none'
            }, 200)
        }

        // 遮挡层
        const layer = document.querySelector('.layer')
        middle.addEventListener('mouseenter', function () {
            layer.style.display = 'block'
        })
        middle.addEventListener('mouseleave', function () {
            layer.style.display = 'none'
        })
        middle.addEventListener('mousemove', function (e) {
            let x = e.pageX - middle.getBoundingClientRect().left
            let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
            if (x > 0 && x <= 400 && y > 0 && y <= 400) {
                let mx = 0
                let my = 0
                if (x < 100) mx = 0
                if (x >= 100 && x <= 300) mx = x - 100
                if (x > 300) mx = 200

                if (y < 100) my = 0
                if (y >= 100 && y <= 300) my = y - 100
                if (y > 300) my = 200
                layer.style.left = mx + 'px'
                layer.style.top = my + 'px'

                medium.style.backgroundPositionX = -2 * mx + 'px'
                medium.style.backgroundPositionY = -2 * my + 'px'
            }
        })
    </script>
</body>

</html>